<template>
  <div class="page-miH page-bgBack">
    <PageHeader @back="$router.push({ path: '/overview/staff' })" subTitle="返回"> 今日新增 </PageHeader>
    <div class="overview--wrapper">
      <div class="t-row">
        <div class="t-col" @click="onScreening(0)">
          今日新增：<span>{{ allCount }}人</span>
        </div>
        <div class="t-col" @click="onScreening(1)">
          网页端录入：<span>{{ pcCount }}人</span>
        </div>
        <div class="t-col" @click="onScreening(2)">
          手机端录入：<span>{{ appCount }}人</span>
        </div>
        <div class="t-col" @click="onScreening(3)">
          更换用工单位：<span>{{ changeCount }}人</span>
        </div>
      </div>
      <div class="-top-wrapper">
        <div class="-top-left">
          <a-input-search
            v-model="nameOrPhoneOrCard"
            placeholder="姓名/手机号/身份证号"
            style="width: 180px; margin-right: 12px"
            allowClear
            @search="init(true)"
          />

          <a-input-search
            v-model="inputName"
            allow-clear
            placeholder="录入人"
            style="width: 180px; margin-right: 12px"
            @search="init(true)"
          />
          <a-select class="mr12" style="width: 136px" placeholder="员工排序" allow-clear v-model="sortType" @change="init(true)">
            <a-select-option v-for="(item, index) in staffSort" :key="index" :value="item.id">{{ item.name }}</a-select-option>
          </a-select>
          <a-date-picker
            v-model="time"
            valueFormat="YYYY-MM-DD"
            placeholder="选择日期"
            style="width: 136px"
            :allow-clear="false"
            @change="init(true)"
          />
        </div>
        <div>
          <a-button :disabled="!selectedRowKeys.length" type="primary" style="margin-right: 12px" @click="() => download(1)">
            批量导出
          </a-button>

          <a-button :disabled="!staffData.length" type="primary" @click="() => download(2)">全部导出</a-button>
        </div>
      </div>
      <div>
        <a-table
          :columns="columns"
          :data-source="staffData"
          :pagination="pagination"
          :row-key="(d) => d.id"
          :loading="tableLoading"
          :scroll="{ x: 800 }"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          @change="handleTableChange"
        >
          <span slot="name" slot-scope="text, record">
            <div class="today-tags">
              <div class="tags-item" style="background: #ffbb02" v-if="record.status == 1">待入职</div>
              <div class="tags-item" style="background: #b9b9b9" v-if="record.status == 4">已离职</div>
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ text }}</span>
                </template>
                {{ text }}
              </a-tooltip>
            </div>
          </span>
          <template slot="contractsStatus" slot-scope="text, record">
            <span>{{ record.contractsStatus != null ? getConstractsStatusType(Number(record.contractsStatus)) : "" }}</span>
          </template>
          <template slot="postType" slot-scope="text, record">
            <span>{{ record.postType != null ? $store.state.enums.postTypeArr[record.postType - 1] : "" }}</span>
          </template>
          <template slot="gmtCreate" slot-scope="text">
            <span>{{ text ? moment(text).format("HH:mm:ss") : "" }}</span>
          </template>
          <span slot="sourceType" slot-scope="text">
            <span v-if="text === 1">网页端</span>
            <span v-if="text === 2">手机端</span>
            <span v-if="text === 3">更换用工单位</span>
          </span>
          <template slot="action" slot-scope="text, record">
            <a-button size="small" type="link" @click="goDetail(record)"> 详情 </a-button>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { getQueryCount, postQueryEmpPageList, getQueryEmpPageList, postQueryCount } from "./api";
import moment from "moment";
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    align: "center",
    key: "name",
    ellipsis: true,
    scopedSlots: { customRender: "name" },
    width: 100
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone",
    width: 150
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    ellipsis: true,
    width: 200
  },
  {
    title: "用工单位",
    dataIndex: "companyName",
    ellipsis: true,
    width: 150,
    scopedSlots: { customRender: "companyName" }
  },
  {
    title: "工作性质",
    dataIndex: "postType",
    ellipsis: true,
    width: 150,
    scopedSlots: { customRender: "postType" }
  },
  {
    title: "创建时间",
    dataIndex: "gmtCreate",
    ellipsis: true,
    width: 150,
    scopedSlots: { customRender: "gmtCreate" }
  },
  {
    title: "录入人",
    dataIndex: "inputName",
    key: "inputName",
    width: 150
  },
  {
    title: "录入方式",
    dataIndex: "sourceType",
    key: "sourceType",
    width: 150,
    scopedSlots: { customRender: "sourceType" }
  },
  {
    title: "操作",
    fixed: "right",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
    width: 100
  }
];
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
const mixin = new ExportMixin();
import { getChannels } from "@/api/outsourcing/outsourcing";
export default {
  mixins: [mixin],
  data() {
    return {
      showTable: true,
      selectedHead: [],
      // 员工排序
      staffSort: [
        { id: 1, name: "按姓氏排列", key: "namePinyin" },
        { id: 2, name: "按创建时间排列", key: "gmtCreate" },
        { id: 3, name: "按修改时间排列", key: "gmtModified" }
      ],
      noSelectedHead: [],
      tempSelectedHead: [],
      tempNoSelectedHead: [],
      companyOptions: [],
      joinDateMoment: [],
      headVisible: false,
      searchVisible: false,
      form: {},
      gmtOrder: "gmtCreate",
      tempForm: {},
      rules: {},
      staffData: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      selectedRowKeys: [],
      tableLoading: false,
      labelList: [],
      channelNames: [],
      time: this.moment().format("YYYY-MM-DD"),
      nameOrPhoneOrCard: "",
      inputName: "",
      sortType: undefined,
      sourceType: 0,
      allCount: 0,
      pcCount: 0,
      appCount: 0,
      changeCount: 0
    };
  },
  computed: {
    ...mapGetters(["permissions_site", "isJF"]),
    ...mapGetters({
      SelectedAllIds: "site/SelectedAllIds"
    }),
    ...mapState(["hr"]),
    companyList() {
      return this.hr.companyList;
    },
    columns() {
      return this.isJF ? columns.filter((item) => item.dataIndex !== "postType") : columns;
    }
  },
  created() {
    this.init();
    getChannels({
      pageNo: 1,
      pageSize: 1000
    }).then((res) => {
      this.channelNames = res.data.entities;
    });
  },
  methods: {
    moment,
    download(i) {
      if (i === 2) {
        this.exportData = {
          isAll: 1,
          exportType: 1,
          operationEmpRecordQuery: {
            sourceType: this.sourceType ? this.sourceType : null,
            nameOrPhoneOrCard: this.nameOrPhoneOrCard,
            inputName: this.inputName,
            sortType: this.sortType ? this.sortType : null,
            date: this.time
          }
        };
      } else {
        const selectedRowKeys = this.staffData.filter((e) => {
          if (this.selectedRowKeys.includes(e.id)) {
            return e;
          }
        });
        const empInfoVOList = selectedRowKeys;
        this.exportData = {
          exportType: 1,
          empInfoVOList
        };
      }
      this.url = `/hr/api/v1/statisticsPage/empTodayAddExport`;
      this.excelName = `今日新增人员.xlsx`;
      this.postDownload();
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.init();
    },
    goDetail(record) {
      this.$router.push({
        path: "/staffc/detail",
        query: {
          id: record.id,
          userId: record.userId,
          companyId: record.companyId,
          prevpage: location.hash.slice(1),
          pageType: "todayAdd"
        }
      });
    },

    async onGetQueryCount() {
      try {
        const { data } = await getQueryCount({
          date: this.time ? this.time : this.moment().format("YYYY-MM-DD HH:mm:ss"),
          status: 1
        });
        this.allCount = data.allCount;
        this.pcCount = data.pcCount;
        this.appCount = data.appCount;
        this.changeCount = data.changeCount;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onPostQueryCount() {
      try {
        const siteId = this.SelectedAllIds;
        const { data } = await postQueryCount({
          companyIds: siteId.split(","),
          date: this.moment().format("YYYY-MM-DD HH:mm:ss"),
          status: 1
        });
        this.allCount = data.allCount;
        this.pcCount = data.pcCount;
        this.appCount = data.appCount;
        this.changeCount = data.changeCount;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onScreening(e) {
      this.sourceType = e;
      this.pagination.current = 1;
      this.init();
    },
    init(v) {
      if (v) {
        this.pagination.current = 1;
      }
      const siteId = this.SelectedAllIds;
      const data = {
        nameOrPhoneOrCard: this.nameOrPhoneOrCard,
        inputName: this.inputName,
        sortType: this.sortType ? this.sortType : null,
        date: this.time,
        sourceType: this.sourceType ? this.sourceType : null,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        "orders[0].property": "gmtCreate",
        "orders[0].desc": true,
        companyIds: siteId.split(",")
      };

      this.onPostQueryCount();
      this.tableLoading = true;
      postQueryEmpPageList(data)
        .then((res) => {
          this.staffData = res.data.entities;
          this.pagination.total = res.data.entityCount;
          this.tableLoading = false;
        })
        .catch((err) => {
          console.log("error log --> ", err);
          this.tableLoading = false;
        });
      this.companyOptions = this.companyList;
    }
  }
};
</script>

<style scoped lang="scss">
.t-row {
  font-size: 16px;
  display: flex;
  .t-col {
    color: #767885;
    margin-right: 24px;
    cursor: pointer;
    span {
      color: var(--primary);
    }
  }
}
.overview-tag-wrapper {
  ::v-deep .ant-tag {
    .anticon-close {
      color: var(--primary);
    }
  }
}
.overview-select-tag-name {
  cursor: pointer;
  margin: 5px;
  color: #666666;
}
.overview-select-tag {
  background-color: #fff !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary);
  cursor: pointer;
  margin: 5px;
}
.overview-no-select-tag {
  background-color: #fff;
  cursor: pointer;
  margin: 5px;
}
.overview--wrapper {
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  .bag-6a66f6-radius-2px {
    background: var(--primary);
    border-radius: 2px;
  }

  .overview--title {
    font-size: 16px;
    color: #000;
  }
  .-top-wrapper {
    margin: 24px 0;
    display: flex;
    justify-content: space-between;
    .-top-left {
      display: flex;
      align-items: center;
    }
  }
}
.today-tags {
  position: relative;
  padding-left: 10px;
  .tags-item {
    position: absolute;
    top: -8px;
    left: -42px;
    font-size: 12px;
    width: 86px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    -webkit-transform: rotateZ(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotateZ(-48deg);
  }
}
</style>
